<template>
    <swiper  :options="swiperOption" ref="mySwiper">
       <swiper-slide  v-for="(page,index) of pageList"  :key="index">
          <div class="icons-box">
                <div class="icons-item" v-for="icon of page" :key="icon.id">
                  <img :src="icon.imgUrl" class="imgs" alt="">
                  <div>{{icon.desc}}</div>
                </div>
          </div>
       </swiper-slide>
    </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'HomeIcons',
  props: {
    iconList: Array
  },
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  },
  computed: {
    // 把iconsList转化成二位数组,
    // 如果当前下标处以8,大约8的倍数,则需要切割转换一维数组的下标值
    // 并把这一组的值作为二维数组的元素
    pageList () {
      const pageList = []
      this.iconList && this.iconList.length && this.iconList.forEach((item, index) => {
        const pageNum = Math.floor(index / 6) // floor 小于或等于X值,都转换X值
        if (!pageList[pageNum]) {
          pageList[pageNum] = []
        }
        pageList[pageNum].push(item)
      })
      return pageList
    }
  }
}
</script>stylus

<style lang="stylus"  scoped>
.icons-box
  overflow:hidden
  height:0
  padding-bottom:25%
  width: 100%
  display: flex
  flex-wrap: nowrap
  flex-direction: row
  cursor: pointer
  margin-top:.1rem
  .icons-item
    width: calc(100% / 6)
    text-align: center
    padding-bottom: .12rem
    .imgs
      margin-bottom: .2rem
      margin-top:.12rem
      width:70%

</style>
